<!DOCTYPE html>
<html>

<head>
    <title>
        <%- title %>
    </title>
    <% include layout/lib.ejs %>
    <link rel="stylesheet" type="text/css" href="/css/problems.css" />
    <script type="text/javascript" src="/lib/js/aliyun-oss-sdk-4.4.4.min.js"></script>
    <script type="text/javascript" src="/lib/js/handlebars.min.js"></script>
</head>

<body>
    <% include layout/header.ejs %>
    <div class="problemsBox">

        <div class="problemsContent">

            <div class="askQuestionsBox">
                <div class="askQuestionsTitle"><i class="fa fa-question-circle-o fa-lg"></i>我要提问：</div>
                <div class="askQuestionsDesc">说明：我要提问板块，主要回答是由Easy-D框架的维护者们提供官方回答，提问内容当然不仅限于Easy-D相关的问题，可以提问Easy-D框架之外的开发问题，如果我们有能力为您提供答案，我们会尽力为大家解决问题，为了让大家对回答内容更加清晰，所有回答的形式都会以视频的方式进行回复，不在使用文字.</div>
                <div class="askQuestionsInput">
                    <input type="text" id="questionTitle" placeholder="请输入问题标题" />
                </div>
                <div class="askQuestionsText">
                    <textarea placeholder="请输入问题的描述" id="questionDesc"></textarea>
                </div>
                <div class="askQuestionsUpload">
                    <div class="askQuestionsUploadAdd">
                        <input type="file" id="uploadAskImage" />
                        <i class="fa fa-plus fa-lg"></i>
                        <p>上传图片附件<br />
                            <font color="red">(最多4张)</font>
                        </p>
                    </div>
                    <div class="askQuestionsUploadImages">

                    </div>
                </div>
                <div class="codeData">
                    <input type="text" id="questionCode" style="width:150px;height:57px;outline: none;float:left;margin-right:10px;padding-left:15px;padding-right:15px;border:none;border:1px solid #eee;" name="code" placeholder="请输入验证码" /> <img id="codeImage"  style="position:relative;top:0px;border:1px solid #eee;padding-bottom:5px;" src="/common/createCode">
                </div>
                <div class="askQuestionsSubmit">
                    <div class="askQuestionsBtn">提交我的问题</div>
                </div>
            </div>
            <!-- <span id="showMyQuestion">查看我的问题</span> -->
            <div class="problemsListTitle"><i class="fa fa-list fa-lg"></i>问题列表：</div>

            <div style="width:100%;height:auto;" id="problemsContentMain">
                <% for(var i=0;i<listData.length;i++){ %>
                <div class="problemsContentItem">
                    <div class="problemsUserInfo">
                        <img src="<%- listData[i].u_header %>" />
                        <%- listData[i].u_nickname %>
                    </div>
                    <div class="problemsContentTitle"><i class="fa fa-lightbulb-o fa-lg"></i>
                        <%- listData[i].q_title %><span>提问时间：
                            <%- common.dateFormat("yyyy-MM-dd hh:mm",listData[i].q_create_time); %></span></div>
                    <div class="problemsContentDesc">
                        <%- listData[i].q_desc %>
                    </div>
                    <div class="problemsContentDescImage">
                        <%  
                        var imagesData = [];
                        if(listData[i].q_images.length > 0){
                           imagesData = listData[i].q_images.split(",");
                        }
                        
                        if(imagesData.length > 0){

                            for(var k=0;k<imagesData.length;k++){
                    %>
                        <div class="imageItem">
                            <img id="<%- imagesData[k] %>" src="<%- imagesData[k] %>" />
                        </div>
                        <% 

                            }
                        }
                     %>
                        <div style="clear:both;"></div>
                    </div>
                    <% if(listData[i].q_reply_uid != 0){ %>
                    <div class="problemsContentVideoTitle"><i class="fa fa-play-circle fa-lg"></i>视频回复：</div>
                    <div class="problemsContentVideo">
                        <video id="my-video" class="video-js vjs-big-play-centered" controls style="width:100%;height:100%;">
                            <source id="video_source" src="<%- listData[i].q_reply_video_url %>"
                                type="video/mp4">
                            <p class="vjs-no-js">
                                要查看此视频，请启用JavaScript，并考虑升级到一个网页浏览器
                                <a href="http://videojs.com/html5-video-support/" target="_blank">支持HTML5视频</a>
                            </p>
                        </video>
                    </div>
                    <% if(listData[i].q_status == 0){ %>

                    <!-- 判断是否为自己的问题，如果为自己的问题，并且未解决可以标记已解决 -->
                    <!-- <%  if(listData[i].isTagSolve == 1){ %>
                                    <div class="askActionBox">标记为已解决</div>
                                <% } %> -->
                    <div class="solveStatusBox" style="background-image:url('/image/ed-34.png')">
                        <div class="solveUserBox">
                        </div>
                    </div>

                    <% }else{ %>
                    <div class="solveStatusBox" style="background-image:url('/image/ed-35.png')" ;>
                        <div class="solveUserBox">
                            <img src="/image/duigou.png" />
                        </div>
                    </div>
                    <% } %>
                    <% } %>
                </div>

                <% } %>
            </div>
            <% if(listData.length < 20){ %>
            <div class="questionNoMoreBox"><b>已没有更多问题</b></div>
            <% }else{ %>
            <div class="questionMoreBox"><b>显示更多问题</b><i class="fa fa-ellipsis-h fa-lg"></i></div>
            <% } %>

        </div>
    </div>


    <div class="images_prev_box">
        <div class="images_prev_main">
            <div class="images_prev_main_left_btn">
                <span class="fa fa-arrow-circle-left fa-lg"></span>
            </div>
            <div class="images_prev_main_content">
                <div class="images_prev_item_box">

                </div>

                <div class="image_prev_index_box">
                    1 / 10
                </div>

            </div>


            <div class="images_prev_main_right_btn">
                <span class="fa fa-arrow-circle-right fa-lg"></span>
            </div>

        </div>

        <div class="images_prev_close_btn">
            <span class="fa fa-times-circle fa-lg"></span>
        </div>

    </div>


</body>

<script type="text/template" id="myTemplate">
    {{#each result}} 
    <div class="problemsContentItem">
            <div class="problemsUserInfo">
                <img src="{{u_header}}" />
                {{u_nickname}}
            </div>
            <div class="problemsContentTitle"><i class="fa fa-lightbulb-o fa-lg"></i>{{q_title}}<span>提问时间：{{dateFormat q_create_time}}</span></div>
            <div class="problemsContentDesc">{{q_desc}}</div>
            <div class="problemsContentDescImage">

                {{#each images}}
                     <div class="imageItem">
                        <img id="{{this}}" src="{{this}}" />
                    </div> 
                {{/each}}

                 <div style="clear:both;"></div>
            </div>

                    {{#transformatBool q_reply_uid}}
                    <div class="problemsContentVideoTitle"><i class="fa fa-play-circle fa-lg"></i>视频回复：</div>
                    <div class="problemsContentVideo">
                        <video id="my-video" class="video-js vjs-big-play-centered" controls style="width:100%;height:100%;">
                            <source id="video_source" src="https://artmofangtest.oss-cn-beijing.aliyuncs.com/20181220_211607.mp4" type="video/mp4">
                            <p class="vjs-no-js">
                                要查看此视频，请启用JavaScript，并考虑升级到一个网页浏览器
                            <a href="http://videojs.com/html5-video-support/" target="_blank">支持HTML5视频</a>
                            </p>
                        </video>
                    </div>
                       

                            <!-- 判断是否为自己的问题，如果为自己的问题，并且未解决可以标记已解决 -->
                            {{#transformatBool q_status}}
                            <div class="solveStatusBox" style="background-image:url('/image/ed-35.png')";>
                                <div class="solveUserBox">
                                    <img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/morentouxiang.png" />
                                </div>
                            </div>
                            {{else}}
                                    <!-- {{#transformatBool isTagSolve}}
                                        <div class="askActionBox">标记为已解决</div>
                                    {{/transformatBool}} -->
                                <div class="solveStatusBox" style="background-image:url('/image/ed-34.png')">
                                    <div class="solveUserBox">
                                    </div>
                                </div>
                           {{/transformatBool}} 
                    {{/transformatBool}}   
                
        </div>
        {{/each}}
</script>


<script>
    $(function () {


        //初始化分页数
        var skip = 0;

        $(document).on("click", ".imageItem", function () {

            _leftV = 0;

            //获取当前图片元素的数组
            var imageParentBox = $(this).parent();
            imageCount = imageParentBox.find(".imageItem").length;


            //获取当前点击的索引
            _imageIdx = imageParentBox.find(".imageItem").index(this);
            $(".image_prev_index_box").text((_imageIdx + 1) + " / " + imageCount);

            //总容器宽度
            $(".images_prev_item_box").width(imageCount * 800);
            $(".images_prev_main").css("marginLeft","-605px")

            //获取出图片源地址
            var imageUrlArr = [];

            var imagHTML = "";
            imageParentBox.find(".imageItem").each(function () {

                var nowImgUrl = $(this).find("img").attr("id");

                imagHTML += '<div class="images_prev_item"><img src="' + nowImgUrl + '" /></div>';


            });


            //获取当前滚动条的位置
            var nowScrollTop = $(document).scrollTop();

            $(".images_prev_item_box").html(imagHTML);
            $(".images_prev_box").show();
            $(".images_prev_box").css("top", nowScrollTop);

            _leftV -= 800 * _imageIdx;
            $(".images_prev_item_box").css("left", _leftV);

            //禁止滚动
            $('body,html').css({
                overflow: 'hidden',
            });


        });

        $(document).on("click",".images_prev_main_left_btn span",function(){
            
            

            if(_imageIdx-1 < 0){
                return false;
            }

            _imageIdx--;


            _leftV += 800;
            $(".image_prev_index_box").text((_imageIdx+1)+" / " +  imageCount);
            $(".images_prev_item_box").css("left",_leftV);

            return false;

        });

        $(document).on("click",".images_prev_main_right_btn span",function(e){

            if(_imageIdx+1 >= imageCount){
                return false;
            }

            _imageIdx++;
            
            
            _leftV -= 800;
            $(".image_prev_index_box").text((_imageIdx+1)+" / " +  imageCount);
            $(".images_prev_item_box").css("left",_leftV);
            
        });

        $(".images_prev_close_btn").click(function(){
            $(".images_prev_box").fadeOut(300);
            $('body,html').css({
                overflow:'auto',
            });
        })


        //加载更多
        $(".questionMoreBox b").click(function () {

            var _text = $(".questionMoreBox b").text();  
            if(_text == '已没有更多问题'){
                return;
            }  

            skip = skip + 20;

            POP.startLoading();

            HTTP.get("/user/searchQuestion/skip/" + skip + "/limit/20", (rs) => {

                POP.endLoading();

                var tpl = $("#myTemplate").html();


                if (rs.length <= 0) {
                    POP.info("已没有更多问题");
                    $(".questionMoreBox").html("<b>已没有更多问题</b>");
                    return;
                }


                //处理图片数组
                for (var i = 0; i < rs.length; i++) {

                    if (rs[i].q_images.length <= 0) {
                        rs[i].images = [];
                    } else {
                        rs[i].images = rs[i].q_images.split(",");
                    }

                }

                //预编译模板
                var template = Handlebars.compile(tpl);

                var html = template({ result: rs });

                $("#problemsContentMain").append(html);

            })


        });

        Handlebars.registerHelper("dateFormat", function (value) {
            return dateFormat("yyyy-MM-dd hh:mm", value)
        });

        Handlebars.registerHelper("transformatBool", function (value, options) {
            if (value == 0) {
                return options.inverse(this);
            } else {
                return options.fn(this);
            }
        });



        //提交问题
        $(".askQuestionsBtn").click(function () {

            //查看用户是否登录
            if (!USER.isLogin()) {
                POP.warning("请先登录，在进行该操作");
                return;
            }

            var qTitle = $("#questionTitle").val();
            var qDesc = $("#questionDesc").val();
            var qCode = $("#questionCode").val();

            if (str_trim(qTitle).length <= 0) {
                POP.warning("验证提示", "问题标题不能为空");
                return;
            }

            if (str_trim(qDesc).length <= 0) {
                POP.warning("验证提示", "问题描述不能为空");
                return;
            }

            if (str_trim(qCode).length <= 0) {
                POP.warning("验证提示", "验证码不能为空");
                return;
            }

            var params = {
                q_uid: USER.getUserId(),
                q_code : qCode,
                q_title: qTitle,
                q_desc: qDesc,
                q_images: attachmentImages.length == 0 ? "" : attachmentImages.join(",")
            }

            POP.startLoading();

            HTTP.post("/user/addQuestion", params, (rs) => {

                POP.endLoading();
                POP.success("提示信息", "恭喜您，问题提交成功");



                setTimeout(() => {

                    //清空内容
                    $("#questionTitle").val("");
                    $("#questionDesc").val("");
                    attachmentImages = [];
                    createImagesHTML();

                    location.reload();
                }, 1500);

            })

        });

        $("#codeImage").click(function(){
            $(this).attr("src","/common/createCode?random=" + Math.random())
        });

        //删除图片事件
        $(document).on("click", ".askQuestionsUploadImgItem i", function () {

            var _index = $(".askQuestionsUploadImgItem i").index(this);

            attachmentImages.splice(_index, 1);

            createImagesHTML();

        });

        //附件图片数组
        var attachmentImages = [

        ];

        //根据图片数组生成显示的图片
        function createImagesHTML() {

            //清除原有内容
            $(".askQuestionsUploadImages").html("");

            var HTML = "";
            for (var i = 0; i < attachmentImages.length; i++) {
                HTML += '<div class="askQuestionsUploadImgItem"><img src="' + attachmentImages[i] + '" /><i class="fa fa-times-circle fa-lg"></i></div>';
            }

            $(".askQuestionsUploadImages").html(HTML);

        }

        $("#uploadAskImage").change(function (e) {

            //判断图片数量
            if (attachmentImages.length >= 4) {
                POP.warning("抱歉，最多只能上传4张图片附件")
                return;
            }

            var file = e.target.files[0];
            if (file == undefined) { return }

            //判断文件类型
            var fileExt = file.name.toLowerCase().split('.').splice(-1);
            var isExt = containsArr(['jpg', 'png', 'gif', 'svg', 'jpeg'], fileExt[0]);
            if (!isExt) {
                return cb(false, "抱歉,不支持上传该格式的文件");
            }

            POP.startLoading();

            //获取上传签名
            HTTP.post("/common/getTSTToken", {}, (rs) => {

                var client = new OSS.Wrapper({
                    region: "oss-cn-beijing",
                    accessKeyId: rs.AccessKeyId,
                    accessKeySecret: rs.AccessKeySecret,
                    stsToken: rs.SecurityToken,
                    bucket: "e-d"
                });

                var fileName = Date.parse(new Date());
                var fileExt = file.name.toLowerCase().split('.').splice(-1);
                var randStr = randomString(6);
                var newFilename = fileName + "-" + randStr + "." + fileExt[0];

                client.multipartUpload("question/" + newFilename, file).then(function (result) {

                    POP.endLoading();


                    if (result.url != undefined) {

                        attachmentImages.push(result.url);

                    } else {

                        var IMAGE_SERVER = "https://e-d.oss-cn-beijing.aliyuncs.com/";
                        attachmentImages.push(IMAGE_SERVER + result.name);
                    }

                    //重新生成预览图
                    createImagesHTML();

                }).catch(function (err) {
                    console.log(err);
                    POP.error("图片上传失败，请重新尝试")
                });

            })

        });



    })
</script>

</html>